.@{theme} {
  .field-main {
    height: 100%;
    background-color: @normal-bg-color;
    .category-list{
      span{
       color:@category-list;
      }
     }
    .fiele-main-wrap{
    }
  	.field-main-title{
  		background-color: @title-bg-color;
      border-bottom: 1px solid @nav-border;
  		color: @title-color;
  		height: 50px;
  		line-height: 50px;
  		padding-left: 30px;
  		margin-bottom: 30px;
  		font-size: 14px;
  	}
    .ant-form{
      button {
        border:0;
      }
      .bor{
        .param-field{
          .ant-form-item-label{
            min-width:152px;
          }
          .ant-form-item-tab{
            width:60%;
            margin-left:8%;
              .ant-form-item-preview{
                border: 1px solid @normal-font-color;
              }
              .ant-tabs-bar{
                border-color:@input-border;
              }
              .ant-tabs-tab{
                border-radius: 0;
                border:none;
                color: @normal-font-color;
                background: @input-bg;
              }
              .ant-tabs-tab-active{
                  .ant-tabs-tab-inner{
                    color: @title-color;
                    background: @primary-color;
                    border: 1px solid @input-border;
                  }
              }
              .ant-select-selection{
                text-align: left;
              }
          }
        }
      }
    }
  }
  .expend-field{
    .ant-card {
      background-color: @field-expend-card-bg;
      &:hover{
        background-color: @field-expend-card-hover-bg;
      }
    }

  }
  .inset-field{
    .ant-card {
      background-color: @field-inset-card-bg;
      &:hover{
        background-color: @field-inset-card-hover-bg;
      }
    }

  }
  .field-fieldCard {
    cursor: pointer;
  	margin-top: 12px;
    padding-left: 12px;
    text-align: left;
    font-size:15px;
    .ant-card {
    	color: @default-font-color;
      height:90px;
    	&:hover{
    		-moz-box-shadow:0px 0px 8px @search-box-bg;
    		-webkit-box-shadow:0px 0px 8px @search-box-bg;
    		box-shadow:0px 0px 8px @search-box-bg;
    		.field-button{
    			background-color: @delete-hover-color;
    			color: @active-font-color;
    		}
    	}
    }
  	.field-name {
  		float: left;
  		margin-left:15px;
  		color: @default-font-color;
  		font-size: 14px;
  	}
  }
  .field-type-title {
  	font-family:"微软雅黑";
  	float:left;
  	margin-top:10px;
  	margin-left:50px;
  	font-size:12px;
  	color:@normal-font-color;

  }

  .config-main .field-button,.config-main .field-button-disable {
  	float: right;
    min-width: 55px;
    height: 22px;
    color: @model-card-btn-cancel-color;
    margin-right: 15px;
    padding: 0 3px;
    background: none;
    border: none;
  }
  .config-main .field-button-disable{
  	display: none;
  	background: none;
  	color: @model-card-btn-cancel-color;
  }

  .config-main .field-card-wrap {
    overflow: hidden;
    margin-left: -12px;
    padding-bottom: 12px;
  }
  .config-main .trigger-tips{
    float: left;
    color: @accent-color;
  }
  .field-content {
    margin-top: 16px;
    margin-bottom: 30px;
    text-align: left;
    font-size: 15px;
  }

  .field-foot {
    text-align: left;
    font-size:15px;
    margin-top: 30px;
  }
  .type-menu {
  	/* height:50px; */
  	& > .ant-form-item{
  		margin-bottom: 0;
  	}
  }
  .bor{

  	width:100%;
  	/* height:50%; */
  	/* margin-top:30px; */
  	/* padding-top:10px; */
  	/* float: left; */
  }

  .bottom{
  	float: center;
  }
  .filed-type-block {
  	margin-right:10px;
  	text-align: center;
  	float: left;
  }
  .field-type-common{
  	border: 1px dashed white;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    width: 55px;
    height: 55px;
    margin-bottom: 1px;
    background: @input-bg;
    border-radius: 1px;
    font-size: 40px;
    line-height: 55px;
    text-align: center;
    color: @btn-unselect-color;
  }
  .field-type-unselected{
    background: @input-bg;
    color: @btn-unselect-color;
  }

  .field-type-selected{
    border:none;
    background: @primary-color;
    color: @circle-color;
  }

  .field-span-unselected{
  	color: @btn-unselect-color;
  	font-size:12px;
  	text-align: center;
  }
  .field-span-selected {
  	color: @form-label-color;
  	font-size:12px;
  	text-align: center;
  }

  .field-icon {
  	width: 32px;
  	height: 32px;
  	margin-left: 15px;
  	margin-top: 15px;
    font-size: 32px;
    line-height: 32px;
    text-align: center;
  }
  .createField-button{
  	margin-left: 12.5%;
  	margin-top: 40px;
  }
  .field-cancel-button {
  	margin-left: 20px;
  }

  .param-field {
  	/* margin-left:50px; */
  	.ant-form-item {
      margin: 14px 0;
  	}
    .check-box-color{
      color: @btn-unselect-color
    }
    .option-circle-level{
      border-radius: 100%;
      width: 20px;
      line-height: 18px;
      text-align: center;
      display: inline-block;
      border: 1px solid #fff;
    }
    .option-margin{
      margin-left: 10px;
    }
  }

  .key-input {
  	width:200px;
  	margin-top:5px;
  }

  .color-picker{
  	  width: 20px;
  	  height: 20px;
  	  border-radius: 100%;
  	  background-color: #000;
  	  display:block;
  	}
  .add-option-button {
  	/* margin-left:45px; */
  }
  .extra-frame {
    margin-top: 30px;
    // border: 2px solid #e9ecf0;
    margin-left: 5%;
    margin-right: 18%;
    width: 58%;
    padding-bottom:10px;
  }
  .dustbin-button{
      font-size: 14px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      background-color: @input-bg;
      color: @title-text-border-color;
      text-align: center;
      cursor: pointer;
      transition: all 0.5s;
      &:hover{
      	color: @circle-color;
      }
  }
  .param-title{
  	//border-bottom: 2px solid @normal-bg-color;
    font-size: 14px;
    font-weight: 400;
    ul{
      background-color: @deep-bg-color;
      height: 50px;
      overflow: hidden;
      border-bottom: 2px solid @nav-border;
      li{
        float: left;
        a{
          color: @filter-a-color;
          display: block;
          font-size: 14px;
          line-height: 48px;
          padding: 0 30px;
          &.active{
            background-color: @nav-border;
            color: @font-color-white;
          }
        }
      }
    }
  }

  .top-component{

  }
  .top-component .search-box{
  	width: 25%;
  	display: inline-block;
  }
  .top-component .search-box .search-box-ipt{
  	width: 260px;
    height: 32px;
  	padding-left: 25px;
    background: @search-box-bg;
    border: 1px solid @input-border;
  }
  .top-component .search-box .search-box-icon{
    position: absolute;
    font-size: 16px;
    line-height: 32px;
    width: 28px;
    text-align: center;
    z-index: 1;
    color: @input-placeholder;
  }
  .top-component .new-param {
  	position: absolute;
  	right: 0;
  	top: 0;
  }
  .field-fieldCard .field-name{
     overflow: hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
      word-break:keep-all;
  }
  @media(min-width: 1200px) and (max-width:1500px){
    .field-fieldCard .field-name{
      max-width: 140px;
    }
  }
  @media(min-width:1500px){
    .field-fieldCard .field-name{
      max-width: 196px;
    }
  }
  @media(max-width: 1200px) and (min-width:991px){
    .field-fieldCard .field-name{
      max-width: 210px;
    }
  }
}
